<template>
  <div id="home" class="home">
    <div
      v-if="$store.getters.getToken != null && $store.getters.getToken != ''"
    >
      <AddTodo @add-todo="add_todo" />
      <Todos
        v-bind:todos="todos"
        @del-todo="delete_todo"
        @mark-complete="markComplete"
      />
    </div>
    <div v-else>
      You havn't login, please login first!
    </div>
  </div>
</template>

<script>
  import Todos from "../components/Todos"
  import AddTodo from "../components/AddTodo"

  import { addTodo, queryAllTodo, deleteTodo, doneTodo } from "../api/todo"

  export default {
    name: "Home",
    components: {
      // Header,
      Todos,
      AddTodo,
    },
    data() {
      return {
        todos: [],
      }
    },
    methods: {
      delete_todo(id) {
        deleteTodo(id)
          .then((res) => {
            if (res.data.errors != undefined) {
              //infer that query syntax may have something error
              res.data.errors.forEach((error) => {
                console.log("dgraph delete error: " + error.message)
                this.$message.error("dgraph delete error: " + error.message)
              })
            } else {
              // console.log("res :>> ", res)
              for (var i = 0; i < this.todos.length; i++) {
                if (this.todos[i].id == id) {
                  this.todos.splice(i, 1) // delete the deleted todo in todos
                  i--
                }
              }
              this.$message.success("delete todo success")
            }
          })
          .catch((error) => {
            console.log("delete todo error:", error)
            this.$message.error("delete todo error")
          })
      },

      markComplete(todo) {
        doneTodo(todo.id, !todo.done)
          .then((res) => {
            if (res.data.errors != undefined) {
              //infer that query syntax may have something error
              res.data.errors.forEach((error) => {
                console.log("dgraph markComplete error: " + error.message)
                this.$message.error(
                  "dgraph markComplete error: " + error.message
                )
              })
            } else {
              todo.done = !todo.done
            }
          })
          .catch((error) => {
            console.log("done todo error:", error)
            this.$message.error("update todo error")
          })
      },

      add_todo(content) {
        //post request
        addTodo(content)
          .then((res) => {
            //console.log("res", res)
            if (res.data.errors != undefined) {
              //infer that query syntax may have something error
              res.data.errors.forEach((error) => {
                this.$message.error("dgraph add_todo error: " + error.message)
              })
            } else {
              // this_todo is like {content: xxx, done: xxx, id: xxx}
              var this_todo = res.data.data.addTodo.todo[0]
              this.todos.push(this_todo)
              this.$message.success("add todo success")
            }
          })
          .catch((error) => {
            console.log("add todo error:", error)
            this.$message.error("add todo error")
          })
      },
    },

    mounted() {
      if (this.$store.getters.getToken != null) {
        queryAllTodo()
          .then((res) => {
            // console.log("res :>> ", res)
            if (res.data.errors != undefined) {
              res.data.errors.forEach((error) => {
                console.log("error.msg:", error.message)
                this.$message.error("dgraph error: " + error.message)
              })
            } else {
              this.todos = res.data.data.queryTodo
            }
          })
          .catch((error) => {
            console.log("query todo error: ", error)
            this.$message.error("query todo error")
          })
      }
    },
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
    margin: 8px;
    padding: 0;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
  }

  .btn {
    display: inline-block;
    border: none;
    background: #555;
    color: #fff;
    padding: 7px 20px;
    cursor: pointer;
  }

  .btn:hover {
    background: #666;
  }

  .home {
    padding-left: 25em;
    padding-right: 25em;
  }

  .test_buttons {
    padding-bottom: 2em;
  }
</style>
